<template>
    <div class="every_day">
        <div class="title">{{ item.day }}日</div>
        <div class="imageList" @click="showImage">
            <div class="item" v-for="it in item.Albumbs" :key="it">
                <el-image :src="base_url + it" fit="fill" :lazy="true" :data-index="it"></el-image>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { AppStore } from '@/store';
import { onMounted } from 'vue';
const store = AppStore()
const props = defineProps(['item'])
const base_url = import.meta.env.VITE_APP_URL
const showImage = (e: any) => {
    store.preshow = true
    store.imgurl = base_url + e.target.dataset.index


}
onMounted(() => {

})
</script>

<style scoped lang="scss">
.every_day {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 1vw;

    .title {
        font-size: 1.5vw;
        font-weight: bold;
        margin-left: 1vw;
    }

    .imageList {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        div {
            width: 31%;
            margin: 0.5vw;

            .el-image {
                width: 100%;
                box-shadow: 0 0 10px #000;
                height: 100%;
                transition: all 1s;
            }

            .el-image:hover {
                transform: translateY(-10%);
            }
        }


    }
}
</style>